<template id="s3">
  <div class="bK">
    <div>{{ mines.user }}</div>
    <ul class="bk2">
      <li>
        邮箱：
        <span>{{ mines.emile }}</span>
        <a :href="hr" @click="Pbd">绑定</a>
      </li>
      <li>
        手机号码：
        {{ mines.phone }}
        <a :href="hr" @click="Pbd2">修改绑定</a>
      </li>
      <li>
        账户余额：
        {{ mines.maney + "元" }}
        <a :href="hr">充值</a>
      </li>
      <li>已投递简历：{{ mines.num1 + "份" }}</li>
      <li>未读信息：{{ mines.num2 + "条" }}</li>
      <li>上一条登陆时间：{{ mines.time }}</li>
    </ul>
    <ul class="yx2" v-if="yx">
      <li>
        绑定邮箱:
        <input type="text" v-model="mines.emile" />
        <button @click="Pb1">确定</button>
      </li>
    </ul>
    <ul class="yx2" v-if="yx3">
      <li>
        修改手机号:
        <input type="text" v-model="mines.phone" />
        <button @click="Pb2">确定</button>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Pinformation",
  data() {
    return {
      yx: false,
      yx3: false,
      mines: {
        user: "SS",
        emile: "未绑定邮箱！",
        hr: "javascrict:;",
        phone: "13358469582",
        maney: "0",
        num1: "2",
        num2: "2",
        time: "2020.01.01 8:00",
      },
    };
  },
  methods: {
    Pbd() {
      this.yx = true;
    },
    Pb1() {
      this.yx = false;
    },
    Pbd2() {
      this.yx3 = true;
    },
    Pb2() {
      this.yx3 = false;
    },
  },
};
</script>

<style>
.bk > div {
  height: 48px;
  font-size: 28px;
}
#s3 {
  border: 2px solid black;
  width: 450px;
  background-color: #f8f9fb;
  padding: 10px 20px;
  list-style: none;
}
.bk2 > li {
  height: 48px;
  font-size: 28px;
}
.bk2 > li > a {
  margin-left: 20px;
}
.yx2 {
  background-color: aliceblue;
  width: 500px;
  height: 300px;
  position: relative;
  top: -300px;
  left: 100px;
}
.yx2 > li {
  margin: 10px 30px;
  position: absolute;
  top: 100px;
  font-size: 24px;
}
.yx2 > li > input {
  height: 40px;
  width: 230px;
}
.yx2 > li > button {
  margin-left: 20px;
}
</style>
